<!DOCTYPE html>
<html>
<head>
	<title></title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/index.css">
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
    <div display="inline">
        <p><span>验证码：</span>
            <input id="captcha" type="text" name="captcha" url="{:url('index/index/checkCode')}"/>
            <img src="{:captcha_src()}" onclick="this.src='{:captcha_src()}?x='+Math.random();" />
            <span class="reminder"></span>
        </p>
        <input class="btn" type="button" value="提交"/>
    </div>
    <script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var oBtn      = $("input.btn");
            var oReminder = $("span.reminder");
            var oCaptcha  = $("#captcha");
            $(oBtn).bind('click', function(){
                var oContent = $("input#captcha").val();
                var oUrl     = $("#captcha").attr('url');
                console.log(oContent);
                $.ajax({
                    type:"POST",
                    url:oUrl,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data:{"captcha": oContent},

                    success:function(data){
                        console.log(data);
                        if( data != 1 ){
                            var html = "验证码不正确";
                            $(oReminder).append(html);
                            $(oBtn).unbind('click');
                        } else{
                            var html = "验证码ok";
                            $(oReminder).append(html);
                        }
                    },
                    error:function(){
                        console.log(888);
                    }
                });

            });

            $(oCaptcha).bind("focus",function(){
                $(oReminder).hide();
            });
            $(oCaptcha).bind("blur",function(){
                $(oReminder).show();
            });
        });
    </script>
</body>
</html>